<template>
    <div>
        <el-card class="bottom10">
            <el-row>
                <el-col :span="6">
                    <div>
                        <span style="margin-right: 4px;"> 关键词：</span>
                        <el-input v-model="input" clearable placeholder="请输入节点组名称" @change="inputChange" style="width:200px">
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="3" :push="15">
                    <el-button class="float-right" type="primary" @click="importDevice">导入设备信息</el-button>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="table-card">
            <e-table :tableConfig="tableConfig" :tableData="tableData" />
        </el-card>

        <!-- 弹出框 -->
        <div class="dialog-header">
            <!-- 导入设备 -->
            <el-dialog title="导入设备信息" width="650px" v-model="monitorManageDialog">
                <div class="flex">
                    <p>设备信息文件:</p>
                    <p>
                        <el-upload class="upload-demo" action="#" accept="text/plain" :show-file-list='false' :before-upload="beforeUpload" :limit="1">
                            <el-button size="small">点击上传</el-button>
                        </el-upload>
                    </p>
                    <p>
                        <el-button type="primary" @click="downTemplate">下载模板</el-button>
                    </p>
                </div>
                <div class="flex tips-margin">
                    <svg-icon name='icon-tips' svgClass='tips-svg' />
                    <span class="font12">
                        请根据模板内容格式内容填写设备别名、类型信息。
                    </span>
                </div>
                <div class="save-button">
                    <el-button type="primary" class="width80" @click="importSave">保存</el-button>
                </div>
            </el-dialog>
            <!-- 修改设备 -->
            <el-dialog title="修改设备信息" width="650px" v-model="modifyDeviceDialog">
                <div class="deviceFrom">
                    <el-form :model="deviceFrom">
                        <el-form-item label="设备MAC:">
                            {{deviceFrom.deviceMac}}
                        </el-form-item>
                        <el-form-item label="设备类型:">
                            <el-select v-model="deviceFrom.deviceType" placeholder="设备类型">
                                <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="设备名称:">
                            <el-input v-model="deviceFrom.deviceName" class="inputWidth"></el-input>
                        </el-form-item>
                    </el-form>
                    <div>
                        <el-button type="primary" class="width80 btn-margin" @click="importSave">保存</el-button>
                    </div>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue';
import ETable from 'comps/eTable/index.vue';
import { ElMessage } from 'element-plus';
import SvgIcon from 'svgIcon/SvgIcon.vue';
export default defineComponent({
    name: 'equipmentManage',
    components: { ETable, SvgIcon },
    setup() {
        const input = ref('');
        const inputChange = (v: String | Number) => {
            console.log(v);
        };
        // 导入弹出
        let monitorManageDialog = ref(false);
        // 编辑弹出
        let modifyDeviceDialog = ref(false);
        let deviceFrom = reactive({
            deviceMac: '',
            deviceType: '',
            deviceName: ''
        });
        const typeList = reactive([
            {
                value: '1',
                label: '清洁机器人'
            },
            {
                value: '2',
                label: '测温机器人'
            },
            {
                value: '3',
                label: '未知'
            }
        ]);
        //表格配置
        const tableConfig = reactive({
            thead: [
                { lable: '设备MAC', prop: 'deviceMac' },
                { lable: '设备别名', prop: 'deviceAlias' },
                { lable: '设备类型', prop: 'deviceType' },
                { lable: '设备状态', prop: 'deviceState' },
                { lable: '更新时间', prop: 'renewTime' }
            ],
            operates: [
                {
                    id: 1,
                    label: '编辑',
                    type: 'text',
                    method: (index: any, row: any) => {
                        modifyDeviceDialog.value = true;
                        deviceFrom.deviceMac = row.deviceMac;
                        deviceFrom.deviceType = row.deviceType;
                        deviceFrom.deviceName = row.deviceAlias;
                        // updateDevice(row);
                    }
                },
                {
                    id: 2,
                    label: '删除',
                    type: 'text',
                    method: (index: any, row: any) => {
                        console.log(row);
                        console.log(22);
                    }
                }
            ]
        });
        // 编辑反向渲染
        const updateDevice = (data: any) => {
            deviceFrom.deviceMac = data.deviceMac;
            deviceFrom.deviceType = data.deviceType;
            deviceFrom.deviceName = data.deviceAlias;
        };

        const tableData = reactive([
            {
                id: '1',
                deviceMac: '50EB71B15FC1',
                deviceAlias: '设备1001',
                deviceType: '未知',
                deviceState: '在线',
                renewTime: '2021- 08-06 13:45:30'
            },
            {
                id: '2',
                deviceMac: '50EB71B15FC1',
                deviceAlias: '测温机器人KF00121',
                deviceType: '测温机器人',
                deviceState: '离线',
                renewTime: '2021- 08-06 13:45:30'
            }
        ]);
        // 事件
        const options: any = reactive({
            importDevice: () => {
                monitorManageDialog.value = true;
            },
            // 上传文件前判断是否为txt
            beforeUpload: (file: any) => {
                const fileType = file.name.substring(file.name.lastIndexOf('.'));
                console.log(file.size);
                if (fileType != '.txt') {
                    ElMessage({
                        showClose: true,
                        message: '请上传txt文件!',
                        type: 'error'
                    });
                    return false;
                } else if (file.szie > 1024 * 1024 * 2) {
                    ElMessage({
                        showClose: true,
                        message: '上传的txt文件不能超2M',
                        type: 'error'
                    });
                    return false;
                }
            },
            // 下载模板
            downTemplate: () => {
                console.log('下载模板');
            },
            // 保存
            importSave: () => {
                console.log('保存');
                console.log(deviceFrom);
            }
        });
        return {
            input,
            inputChange,
            tableConfig,
            tableData,
            deviceFrom,
            monitorManageDialog,
            modifyDeviceDialog,
            typeList,
            ...toRefs(options)
        };
    }
});
</script>

<style lang="scss" scoped>
.dialog-header {
    .upload-demo {
        .el-button {
            width: 412px;
            font-size: 14px;
        }
    }
}
.flex {
    align-items: center;
    p:not(:first-child) {
        margin-left: 14px;
    }
}
.save-button {
    text-align: center;
    margin: 30px 0 10px 0;
}
.tips-margin {
    margin: 10px 0 0 98px;
}
.deviceFrom {
    .inputWidth {
        width: 300px;
    }
    .btn-margin {
        margin: 12px 0 10px 78px;
    }
}
</style>
<style lang="scss">
.deviceFrom {
    .el-form-item__label {
        padding: 0 18px 0 0 !important;
    }
}
</style>